<template >
    <div class="login_container">
        <div class="login_box">

            <!-- 头像区 -->
            <div class="avatar_box">
                <img src="../assets/img/erha.jpg">
            </div>

            <!-- 登陆表单区 -->
            <el-form  
                label-width="0px" 
                class="login_form"
                :model="loginForm"
                :rules="loginFormRules"
                ref="loginFormRef"
            
            >
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input 
                        prefix-icon="iconfont icon-user"
                        v-model="loginForm.username"
                    >
                    </el-input>
                </el-form-item>

                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input 
                        prefix-icon="iconfont icon-3702mima"
                        v-model="loginForm.password"
                        type="password"
                    >
                    </el-input>
                </el-form-item>

                <!-- 按钮区 -->
                <el-form-item  class="btns">
                    <el-button type="primary" @click="login()">登陆</el-button>
                    <el-button type="info" @click="resetLoginForm()">重置</el-button>
                </el-form-item>
            </el-form>


        </div>
    </div>
</template>

<script>

export default {

    //数据
    data() {
        return {

            //登陆表单的数据绑定对象
            loginForm:{
                username:"admin",
                password:"123456",
            },

            //表单验证分3步: 1.form绑定rules对象和model数据
            // 2. data设置验证规则 3.form-item里绑定验证对象
            loginFormRules:{
                username:[
                    // trigger:"blur":文本失去焦点触发
                    {
                        required:true,
                        message: '请输入用户名',
                        trigger:'blur'
                    },
                    { 
                        min: 3, max: 5, 
                        message: '长度在 3 到 5 个字符',
                        trigger: 'blur' 
                    }

                ],

                password:[
                    {
                        required:true,
                        message:"请输入密码",
                        trigger: 'blur' 
                    },
                ]




            },

            
            

                
                

        }
    },


    //函数
    methods: {

        //重置登陆表单,参数:可以不要
        resetLoginForm() {
            //resetFields：表单自带的重置函数
            this.$refs.loginFormRef.resetFields();
        },

        login(){
            //如果返回的是Promise对象的话需要使用async和await
            this.$refs.loginFormRef.validate(
                async valid => {
                    //valid:验证结果(true或false)
                    // console.log(valid);

                    if(!valid) return;

                    /****   这里请求后台数据    *****/

                    //data重命名为res，es6对象解构里面的
                    //this.$http是在main里面写好的axios
                    const {data:res} =await this.$http.post('login',this.loginForm);
                    // console.log(res);//res是后台返回回来的数据

                    if(res.meta.status !== 200){
                        //通过挂载在vue原型对象上面就能全局使用message组件了
                        return this.$message.error("登陆失败");
                    }else{
                        //通过挂载在vue原型对象上面就能全局使用message组件了
                        this.$message.success({
                            message:"登陆成功",
                            duration:1000,
                        });

                        //localStorage:持久的会话机制  sessionStorage:临时会话机制
                        //1.将登陆成功之后的token，保存到客户端的sessionStorage中
                        // 1.1项目中除了登陆之外的其他API接口，必须在登陆之后才能访问
                        // 1.2token只应在当前网站打开期间生效,所以将token保存在sessionStorage中
                        // console.log(res);
                        //这里是将token 保存在sessionStorage里面(可以在Application查看)
                        //setItem:自带的函数,用于给sessionStorage对象设置字段
                        window.sessionStorage.setItem('token',res.data.token);


                        //2.通过编程式导航跳转到后台主页，路由地址是/home
                        this.$router.push('/home');

                    }


                }
            )
        }

    },



}

</script>

<style lang="less" scoped>
    .login_container{
        background-color: #2b4b6b ;
        height: 100%;


        .login_box{
            width: 450px;
            height: 300px;
            background-color: #fff;
            border-radius: 3px;

            //下面的是用来做居中的
            position: absolute;
            left: 50%;
            top: 50%;
            //位移:横轴移-50%,纵轴移-50%
            transform: translate(-50%,-50%);


            //头像
            .avatar_box{
                height: 130px;
                width: 130px;
                border: 1px solid #eee;
                border-radius: 50%;
                padding: 10px;
                //设置box阴影
                box-shadow: 0 0 10px #ddd;
                background-color: #fff;

                position: absolute;
                left: 50%;
                transform: translate(-50%,-50%);

                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    background-color: #eee;
                }


            }

        .login_form{

            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;

            //设置为框架盒子
            box-sizing: border-box;


            //登陆表单区-按钮
            .btns{
                //让布局变成弹性盒模型
                display: flex;
                justify-content: center;
            }

        }

            

            


        }
    }
    
</style>